<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>博客系统 | 正文</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/article.css">
</head>
<body>
<div class="nav">
    <!-- 头部导航 navigator -->
    <img src="img/logo.png" alt="logo 图">
    <span class="title">雷世雄的博客</span>
    <!-- 无意义的，为了撑开布局空间 -->
    <span class="spacer"></span>
    <a href="index.html">主页</a>
    <a href="edit.html">写博客</a>
    <!-- 注销：删除用户的登录状态，需要动态操作，暂时不管 -->
    <a href="login.html">注销</a>
</div>

<div class="container">
    <!-- 内容区 -->
    <div class="container-left">
        <!-- 个人信息 -->
        <div class="card">
            <img src="img/doge.jpg" alt="作者头像" class="avatar">
            <h3>雷世雄</h3>
            <a href="https://gitee.com/peixinchen2" target="_blank">我的 git</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>10</span>
                <span>2</span>
            </div>
        </div>
    </div>
    <div class="container-right">
        <div class="blog-content">
            <h3>关于如何学好 CSS</h3>
            <div class="date">2021-12-22</div>
            <!-- 博客正文 -->
            <p>
                从今天起我要好好敲代码.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias
                ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias
                ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem alias
                ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor mollitia dolorum animi.
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint accusantium, enim iste
                corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis
                pariatur delectus perferendis.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sint accusantium, enim iste
                corrupti itaque, omnis alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis
                pariatur delectus perferendis.
            </p>
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, laudantium suscipit exercitationem
                eius repellat laboriosam voluptates, nisi magni esse nostrum obcaecati saepe veritatis, porro
                pariatur explicabo! Debitis non possimus voluptatum.
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, laudantium suscipit exercitationem
                eius repellat laboriosam voluptates, nisi magni esse nostrum obcaecati saepe veritatis, porro
                pariatur explicabo! Debitis non possimus voluptatum.
            </p>
        </div>
    </div>
</div>
</body>
</html>